<template>
  <el-container class="boxmain">
    <el-header style="height: 65px">
      <Head :userinfo="userinfo" />
    </el-header>
    <el-container class="boxsubmain">
      <el-aside width="200px">
        <Menu class="menu" :userinfo="userinfo" />
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
    <el-footer>
      <Foot />
    </el-footer>
  </el-container>
</template>


<script>
import { getuserinfo } from "@/api";
import Head from "@/components/head.vue";
import Foot from "@/components/foot.vue";
import Menu from "@/components/sidemenu.vue";
import {mapState,mapMutations} from 'vuex'
export default {
  components: {
    Head,
    Foot,
    Menu,
  },
  data() {
    return {
      // userinfo: null,
    };
  },
  computed:{
    ...mapState(['userinfo'])
  },
  methods: {
    ...mapMutations(['changeUserinfo'])
  },
  mounted() {
    if(!this.userinfo){
      getuserinfo().then((res) => {
      if (res.type) {
        // this.userinfo = res.result;
        this.changeUserinfo(res.result)
      }
    });
    }
  },
};
</script>


<style lang="scss">
.el-header {
  // background:darkseagreen;
  background-color: rgb(84, 92, 100);
  // background-color: rgba(236,236,235,0.3);
  // background-color: #0000;
}
.el-footer {
  background: rgb(84, 92, 100);
  // background-color: #0000;
  height: 63px;
}

.el-aside {
  height: 100%;
  background: #ffffff;
}
.boxmain {
  width: 100%;
  height: 100%;
  background-color: #0000
  ;
  // background: url(../assets/images/7.jpg);
  // background-size: 120% 100%;
  // background-repeat: no-repeat;
  // background-position: 0 0;
  // overflow: hidden;
  // position: relative;
  // animation: move 20s linear infinite;
}
// .menu{
//   // background-color:;
//   background-color: rgba(236,236,235,0.3);
// }
</style>